<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 
		xmlns:ui="http://java.sun.com/jsf/facelets" 
		xmlns:h="http://java.sun.com/jsf/html" 
		xmlns:f="http://java.sun.com/jsf/core"
		dir="#{skyve.dir}">
    <f:view contentType="text/html" encoding="UTF-8">
		<!-- Dont use h:head coz it'll bring in themes that can screw up the device layout -->
		<head>
			<meta name="viewport" content="width=device-width, initial-scale=1" />
			<link type="text/css" rel="stylesheet" href="#{skyve.baseHref}javax.faces.resource/fa/font-awesome.css.xhtml?ln=primefaces" />
			<script type="text/javascript" src="#{skyve.baseHref}javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces"></script>
			<style>
				html, body {
					height: 100%;
					padding: 0px;
					margin: 0px;
				}
				
				iframe {
					padding: 0px;
					margin: 0px;
				}
				
				/* The device with borders */
				.smartphone {
					-webkit-transform-origin: 0 0;
					transform-origin: 0 0;
					-webkit-transform: scale(.8) translate(-50%) rotate(0deg);
					/* Scaled down for a better Try-it experience (change to 1 for full scale) */
					transform: scale(.8) translate(-50%) rotate(0deg);
					/* Scaled down for a better Try-it experience (change to 1 for full scale) */
					left: 50%;
					position: absolute;
					width: 360px;
					height: 640px;
					border: 16px black solid;
					border-top-width: 60px;
					border-bottom-width: 60px;
					border-radius: 36px;
					margin-top: 20px;
				}
				
				/* The horizontal line on the top of the device */
				.smartphone:before {
					content: '';
					display: block;
					width: 60px;
					height: 5px;
					position: absolute;
					top: -30px;
					left: 50%;
					transform: translate(-50%, -50%);
					background: #333;
					border-radius: 10px;
				}
				
				/* The circle on the bottom of the device */
				.smartphone:after {
					content: '';
					display: block;
					width: 35px;
					height: 35px;
					position: absolute;
					left: 50%;
					bottom: -65px;
					transform: translate(-50%, -50%);
					background: #333;
					border-radius: 50%;
				}
				
				/* The screen (or content) of the device */
				.smartphone .content {
					width: 360px;
					height: 640px;
					background: white;
				}
				
				/* The device with borders */
				.tablet {
					-webkit-transform-origin: 0 0;
					transform-origin: 0 0;
					-webkit-transform: scale(.6) translate(-50%) rotate(0deg);
					/* Scaled down for a better Try-it experience (change to 1 for full scale) */
					transform: scale(.6) translate(-50%) rotate(0deg);
					/* Scaled down for a better Try-it experience (change to 1 for full scale) */
					left: 50%;
					position: absolute;
					width: 768px;
					height: 1024px;
					border: 16px black solid;
					border-top-width: 60px;
					border-bottom-width: 60px;
					border-radius: 36px;
					margin-top: 20px;
				}
				
				/* The horizontal line on the top of the device */
				.tablet:before {
					content: '';
					display: block;
					width: 60px;
					height: 5px;
					position: absolute;
					top: -30px;
					left: 50%;
					transform: translate(-50%, -50%);
					background: #333;
					border-radius: 10px;
				}
				
				/* The circle on the bottom of the device */
				.tablet:after {
					content: '';
					display: block;
					width: 35px;
					height: 35px;
					position: absolute;
					left: 50%;
					bottom: -65px;
					transform: translate(-50%, -50%);
					background: #333;
					border-radius: 50%;
				}
				
				/* The screen (or content) of the device */
				.tablet .content {
					width: 768px;
					height: 1024px;
					background: white;
					margin: -1px;
				}
				
				/* The laptop with borders */
				.laptop {
					-webkit-transform-origin: 0 0;
					transform-origin: 0 0;
					-webkit-transform: scale(.6) translate(-50%);
					/* Scaled down for a better Try-it experience (change to 1 for full scale) */
					transform: scale(.6) translate(-50%);
					/* Scaled down for a better Try-it experience (change to 1 for full scale) */
					left: 50%;
					position: absolute;
					width: 1366px;
					height: 800px;
					border-radius: 6px;
					border-style: solid;
					border-color: black;
					border-width: 24px 24px 80px;
					background-color: black;
					margin-top: 20px;
				}
				
				/* The keyboard of the laptop */
				.laptop:after {
					content: '';
					display: block;
					position: absolute;
					width: 1600px;
					height: 60px;
					margin: 80px 0 0 -110px;
					background: black;
					border-radius: 6px;
				}
				
				/* The top of the keyboard */
				.laptop:before {
					content: '';
					display: block;
					position: absolute;
					width: 250px;
					height: 30px;
					bottom: -110px;
					left: 50%;
					-webkit-transform: translate(-50%);
					transform: translate(-50%);
					background: #f1f1f1;
					border-bottom-left-radius: 5px;
					border-bottom-right-radius: 5px;
					z-index: 1;
				}
				
				/* The screen (or content) of the device */
				.laptop .content {
					width: 1366px;
					height: 800px;
					overflow: hidden;
					border: none;
				}
				
				.desktop {
					-webkit-transform-origin: 0 0;
					transform-origin: 0 0;
					-webkit-transform: scale(1) translate(0%) rotate(0deg);
					/* Scaled down for a better Try-it experience (change to 1 for full scale) */
					transform: scale(1) translate(0%) rotate(0deg);
					/* Scaled down for a better Try-it experience (change to 1 for full scale) */
					left: 0px;
					position: relative;
					width: 100%;
					height: 100%;
					border: none;
				}

				/* The screen (or content) of the device */
				.desktop .content {
					width: 100%;
					height: 100%;
					overflow: auto;
					border: none;
				}
				
				.fa-mobile:hover, .fa-tablet:hover, .fa-laptop:hover, .fa-desktop:hover {
				    font-weight: bold;
				}
			</style>
			<script type="text/javascript">
				document.cookie='UserAgentType=phone';
				
				function clicked(styleClass, userAgentType) {
					$('#device').attr('class', styleClass);
					if (userAgentType) {
						document.cookie='UserAgentType=' + userAgentType;
					}
					else {
						document.cookie='UserAgentType=;expires=-1'
					}
					$('#iframe').attr('src', $('#iframe').attr('src'));
				}
			</script>
		</head>
		<body>
			<div id="device" class="smartphone">
			  <div class="content">
			    <iframe id="iframe" src="#{skyve.baseHref}" style="width:100%;border:none;height:100%"></iframe>
			  </div>
			</div>
			<div style="position:fixed;bottom:0;right:0;width:230px;height:70px;">
				<i class="fa fa-mobile fa-4x fa-hover" onclick="clicked('smartphone', 'phone')" />
				<i class="fa fa-tablet fa-4x" onclick="clicked('tablet', 'tablet')" />
				<i class="fa fa-laptop fa-4x" onclick="clicked('laptop', 'desktop')" />
				<i class="fa fa-desktop fa-4x" onclick="clicked('desktop', null)" />
			</div>
		</body>
	</f:view>
</html>
